.#{$container} {
  position: absolute;
  padding: $container-padding;
  background: #fff;
  color: #222;
  font-size: $font-size;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 5px;
  box-sizing: border-box;
  @include simple-nested-reset;

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  &.#{$hidden} {
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s linear 300ms, opacity 300ms;
  }

  ul {
    list-style: none;
  }

  li {
    position: relative;
    line-height: 20px;
    padding: 2px 5px;

    &:not(.#{$separator}):hover {
      cursor: pointer;
      background-color: #333;
      color: #eee;
    }
  }

  li.#{$submenu} {
    .#{$container} {
      border: 1px solid #eee;
      padding: $container-padding;
      top: 0;
      opacity: 0;
      visibility: hidden;
      transition: visibility 0s linear 300ms, opacity 300ms;
    }

    &:hover .#{$container} {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }

    &::after {
      position: absolute;
      top: 7px;
      right: 10px;
      content: '';
      display: inline-block;
      width: 0.6em;
      height: 0.6em;
      border-right: 0.3em solid #222;
      border-top: 0.3em solid #222;
      transform: rotate(45deg);
    }

    &:hover::after {
      border-color: #eee;
    }
  }
  li.#{$separator} {
    padding: 0;

    hr {
      border: 0;
      height: 1px;
      background-image: linear-gradient(
        to left,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.75),
        rgba(0, 0, 0, 0)
      );
    }
  }
}

.#{$icon} {
  text-indent: 20px;
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-position: left center;
}
.#{$zoomIn} {
  background-image: url('');
}
.#{$container} li:hover.#{$zoomIn} {
  background-image: url('');
}
.#{$zoomOut} {
  background-image: url('');
}
.#{$container} li:hover.#{$zoomOut} {
  background-image: url('');
}
